<template>
<div>
  <quill-editor
    :content="initial"
    :options="options"
    ref="editor"
    @change="onEditorChange($event)"
  >
    <div id="toolbar" slot="toolbar">
      <!-- Add a bold button -->
      <button class="ql-bold">Bold</button>
      <button class="ql-italic">Italic</button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
      <!-- Add font size dropdown -->
      <select class="ql-size">
        <option value="small"></option>
        <!-- Note a missing, thus falsy value, is used to reset to default -->
        <option selected></option>
        <option value="large"></option>
        <option value="huge"></option>
      </select>
      <button class="ql-header" value="1"></button>
      <button class="ql-header" value="2"></button>
      <!-- Add subscript and superscript buttons -->
      <button class="ql-script" value="sub"></button>
      <button class="ql-script" value="super"></button>

      <select class="ql-color"></select>
      <select class="ql-background"></select>

      <select class="ql-align"></select>
      <button class="ql-clean"></button>

      <button class="ql-blockquote"></button>

      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <button class="ql-indent" value="-1"></button>
      <button class="ql-indent" value="+1"></button>

      <button class="ql-link"></button>
      <span class="custom-upload ql-color ql-picker" @click.self.prevent>
        <input @change.stop="handleFileChange" accept="image/*" type="file">
        <svg viewBox="0 0 18 18"> <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect> <circle class="ql-fill" cx="6" cy="7" r="1"></circle> <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline> </svg>
      </span>
    </div>
  </quill-editor>
  <!-- <div class="quill-code">
      <code class="hljs" v-html="contentCode"></code>
    </div> -->
</div>
  
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import Quill from 'quill'
import { uploadPhoto, baseUrl } from '../service/api'
import { ImageImport } from '../service/modules/imageImport.js'
import { ImageResize } from '../service/modules/imageResize.js'
// import hljs from 'highlight.js'
Quill.register('modules/imageImport', ImageImport)
Quill.register('modules/imageResize', ImageResize)
export default {
  components: {
    quillEditor
  },
  props: ['initial'],
  data () {
    return {
      options: {
        modules: {
          toolbar: '#toolbar',
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          imageImport: true,
          imageResize: {
            displaySize: true
          }
        }
      },
      contentCode: ''
    }
  },
  computed: {
    editor () {
      return this.$refs.editor.quill
    }
  },
  methods: {
    onEditorChange (e) {
      // const c = e.html
      // console.log(c.slice(0, 1000))
      // this.contentCode = hljs.highlightAuto(e.html).value
      this.$emit('content-change', e.html)
    },
    async handleFileChange (e) {
      const files = e.target.files
      if (files.length === 0) return false
      const path = await this.uploadImg(files[0])
      if (!path) return false
      const index =
        (this.editor.getSelection() || {}).index || this.editor.getLength()
      this.editor.insertEmbed(index, 'image', path, 'user')
    },
    async uploadImg (file) {
      const fd = new FormData()
      fd.append('photo', file)
      const { err, data } = await uploadPhoto({ fd })
      if (err || data.code !== 200) return false
      return baseUrl + '/upload/' + data.result
    },
    delay (time) {
      return new Promise(resolve => {
        setTimeout(resolve, time)
      })
    }
  },
  mounted () {
    console.log(this.$refs.editor)
  }
}
</script>
<style type="text/scss" lang="scss" rel="stylesheet/scss" scoped>
.custom-upload {
  position: relative;
  // width: auto !important;
  // display: inline-block;
  width: 28px;
  // height: 24px;
  cursor: pointer;
  input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
  }
  svg {
    cursor: pointer;
  }
  &:active {
    outline: none;
  }
  &:focus {
    outline: none;
  }
}
@media screen and (min-width: 768px) {
}

@media screen and (max-width: 767px) {
}
</style>
